<template>
  <div class="app-container">
    <div class="feedback-box table_container">
      <div>
        用户ID：{{$route.query.userId}} 昵称：{{$route.query.nickName}} 手机号：{{$route.query.userName}} 共反馈{{historyFeedbackData.length}}次
      </div>
      <div class="feedback-question">
        <div
          class=""
          v-for="(item,index) in historyFeedbackData"
          :key="index"
        >
          <div class="padding-10">
            <div class="role">
              {{item.nickName}}（{{doFormatDateTime(item.createTime)}}）
            </div>
            <div class="feedback-feedback padding-10">
              {{item.feedback}}
            </div>
            <div
              class="feedback-reply padding-10"
              v-for="reply in item.replayList"
              :key="reply.id"
            >
              <div class="role">
                {{reply.operator}} 回复（{{doFormatDateTime(reply.replyTime)}}）
              </div>
              <div class="padding-10">
                {{reply.reply}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchHistoryFeedbackData } from "@/api/table";
import { formatDateTime } from "@/utils/common";
export default {
  data() {
    return {
      historyFeedbackData: []
    };
  },
  mounted() {
    this.getHistoryFeedbackData();
  },
  methods: {
    async getHistoryFeedbackData() {
      const res = await fetchHistoryFeedbackData({
        userId: this.$route.query.userId
      });
      if (res.status == "200") {
        this.historyFeedbackData = [];
        res.data.list.forEach(item => {
          const backdata = {};
          backdata.createTime = item.createTime;
          backdata.feedback = item.feedback;
          backdata.reply = item.reply;
          backdata.nickName = item.nickName;
          backdata.replayList = item.replayList;
          this.historyFeedbackData.push(backdata);
        });
      }
    },
    doFormatDateTime(data) {
      return formatDateTime(data);
    }
  },
  watch: {
    $route() {
      this.getHistoryFeedbackData();
    }
  }
};
</script>
<style lang="less" scoped>
.feedback-question {
  background: #f2f2f5;
}
.feedback-reply {
  border-top: 1px solid #ccc;
  background: #eaeaec;
  font-size: 12px;
}
.padding-20 {
  padding: 20px;
}
.padding-10 {
  padding: 10px;
}
.role {
  color: #6097d6;
}
.feedback-feedback {
  font-size: 20px;
}
</style>

